<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/lib/fontawesome4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=T3RfkCcGKDbGWecGCPYO7qZIZUUZFdG2"></script>
    <link rel="stylesheet" href="/static/css/head.css">
    <link rel="stylesheet" href="/static/js/ztree/css/zTreeStyle/zTreeStyle.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material.mobile.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        ul{
            list-style: none;
        }
    .contain{
        display: flex;
        margin: 0 auto;
        width: 1550px;
    }
    .contain .left{
        width: 1100px;
        height: 690px;
        position: relative;
    }
    #allmap{
        width: 100%;
        height: 100%;
    }
    .index{
        margin: 0 auto;
        position: relative;
    }
    .contain .right{
        width: 450px;
        height: 690px;
        background: #efefef;
    }
    .panel-body div{
        cursor: pointer;
    }
    .panel-title a{
        width: 100%;
        display: block;
    }
    
    .tool{
        position: absolute;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 11;
    }
    .tool li{
        padding: 5px;
        margin-left: 30px;
        margin-top: 10px;
    }
    .tool1{
        width: 55px;
        height: 55px;
        border-radius: 6px;
        background: rgb(53, 53, 53);
        color: #efefef;
        font-size: 30px;
        text-align: center;
        line-height: 50px;
        
    }
    .tool2{
        padding-top: 5px;
        width: 55px;
        text-align: center;
        color: #efefef;
        font-size: 13px;
    }
    .tool11{
        display: flex;
    }
    .manager, .hostory{
        height: 550px;
        width: 1000px;
        position: absolute;
        background: #efefef;
        border: 1px solid #666;
        border-radius: 5px;
        top: 11%;
        left: 14%;
        z-index: 13;
        padding: 10px;
        display: none;
        
     
    }
    .managecont{
        background: #fff;
        width: 100%;
        height: 470px;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .close{
        height: 40px;
        width: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 26px;
        position: absolute;
        top:5px;
        right: 5px;
    }
    .tool11 div{
        cursor: pointer;
    }
    .rightnav{
        height: 400px;
    }
    .panel-group .panel-heading {
    background: #eee;
    border-bottom: 0;
    }
    .collapse .a{
        border-bottom: 1px solid #eee;
    padding: 5px ;
    margin: 0 10px;
    }
    .collapse .a a{
        display: block;
        color: #999;
    }
    .csactive{
        background: rgb(68, 125, 199)!important;
        color: #fff;
    }
    p{
        margin: 0;
    }
    .tbHide{
        display: table;
        margin: 0 auto;
        padding: 4px;
    }
    .left ul{
        margin-bottom: 0;
    }
    .tooll{
        display: none;
    }
    .tbimgshow{
        display: none;
    }
    .nyjgzs{
  margin: 0 auto;
  background: #fff;
  height: 100%;
  font-size: 12px;
  overflow: hidden;
  height: 270px;
}
.nyjgzs .title{
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  color: #66b1ff;
    text-align: center;
    font-size: 16px;
    padding: 5px;
}
.nyjgzs table{
  width: 100%;
}
.nyjgzs .title table td{
  padding: 10px 0;
}
.nyjgzs .cont{
  overflow: hidden;
}
.nyjgzs .cont td{
  color: #666;
  text-align: center;
  border-bottom: 1px solid #efefef;
  font-size: 15px;
  padding: 9px;
}
.nyjgzs .cont td:first-child{
    width: 27%;
}
.nyjgzs .cont td:nth-child(2){
    width: 48%;
}
@keyframes scroll{
  0%{
    transform: translateY(0px);
  }
  100%{
    transform: translateY(-100px);
  }
}
.nycont {
    -webkit-animation: scroll 30s infinite linear;
    animation: scroll 30s infinite linear;
}
.anchorTL, .anchorTR{
    top:40px!important;
}
.anchorBL{
display: none;
}
.anchorTL{
    display: none;
    
}
#allmap path{
    stroke-opacity: 0.7;
    fill-opacity: 0.15;
}

.leftnav ul{
    height: 400px;
    cursor: pointer;
    display: inline-block;
}
.leftnav li{
    height: 25%;
    width: 90px;
    text-align: center;
    padding-top: 25px;
    border-bottom: 1px solid #ddd;
}
.leftnav li i{
    font-size: 25px;
}
.ldyjactive{
    background: #e2e7ee;
}
.ldyj{
    display: flex;
}
.rqcxbg{
    margin:10px;
}
.rqcxbg td{
    font-size: 12px;
    height: 22px;
    border: 1px solid #53575c;
    border-collapse: collapse;
    width: 50px;height: 35px;
    text-align: center;

    font-weight: bold;
}
.rqcxxq{
    display: flex;
    padding: 10px;
}
.xqright{
    height: 262px;
    width: 350px;
}
.xiazai{
    float: right;
}
.double{
    border: 1px solid #999;
    background: rgba(153, 153, 153, 0.7);
    border-radius: 5px;
    color: #fff;
    padding: 5px;
}
.xqbd{
    padding-top: 10px;
    width: 500px;
}
.xqtitle{
    height: 40px;
}
.xqbg td{
    padding:5px 5px;
    text-align: center;
    border: 1px solid #eee;
}
.yjdcx{
    display: none;
}
.adresstree{
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    margin-top: 20px;
    margin-left: 48px;
    z-index: 1;
    display: none;
}
.yjchoice{
    width: 100%;display: flex;padding: 3px 0;position: relative;
}
.sbztcx{
    display: none;
}

.sbztcx .left{
    width: 500px;
    height: 400px;
}
.sbztcx .right{
    width: 500px;
    height: 400px;
}
.sbztcx .title{
    padding-top: 10px;
    font-size: 18px;
    padding-left: 10px;
}
.sbztcx .tab{
    width: 100%;
    height: 350px;
    padding: 10px;
}
.sbztcx .tab .tab1{
    background: rgba(238, 238, 238, 0.5);
    height: 100%;
    width: 100%;
    overflow-x: auto;
}
.weihu{
    width: 100%;
    text-align: center;
}
.weihu td{
    white-space: nowrap;
    border: 1px solid #999;
}
.contains{
    height: 470px;
}
.yjchoice input{
    width: 85px;
    height: 28px;
    line-height: 24px;
    border-radius: 5px;
    border: 1px solid #999;
    padding: 5px;
    overflow: hidden;
}
.numbh{
    display: grid;;margin-left: -15px;cursor: pointer;color: #333;
}
.numbh i:hover{
    color: #000;
}
.yjd{
    width: 85px;
    border: 1px solid #999;
    border-radius: 5px;
    height: 20px;
}
.xqbg{
    height: 200px;
    overflow-y: auto;
}
.addtj{
    height: 550px;
    width: 1000px;
    position: absolute;
    background: #efefef;
    border: 1px solid #666;
    border-radius: 5px;
    top: 11%;
    left: 14%;
    z-index: 13;
    padding: 42px 15px 20px 15px;
    display: none;
}
.deletetj{
    height: 550px;
    width: 1000px;
    position: absolute;
    background: #efefef;
    border: 1px solid #666;
    border-radius: 5px;
    top: 11%;
    left: 14%;
    z-index: 13;
    padding: 42px 15px 20px 15px;
    display: none;
}
.tjmain{
    background: #fff;
    height: 100%;
    width:100%;
    display: flex;
}
.tjmain .left{
    width: 25%;
    height: 100%;
    padding: 20px;
    border-right: 1px solid #eee;
}
.tjmain .left img{
    width: 200px;
    padding-top: 20px;
}
.tjmain .right li{
    padding: 10px;
    display: flex;
    padding-left: 20px;
}
.adminnum{
    margin-right: 10px;
}
.adminpwd{
    margin-right: 10px;
}
.manageinput{
    background-color: #fafafa;
    border-radius: 1px;
    color: #444;
    border:1px solid #e6e6e6;
    height: 32px;
    padding: 8px;
    width: 172px;
}
.tjname{
    width: 85px;
}
.sc-search{
    border: 1px solid #e6e6e6;
    border-radius: 15px;
    height: 30px;
    outline: none;
    padding: 8px;
}
.delete-name{
    display: flex;
    position: relative;
}
.dele-search{
    height: 20px;
    width: 20px;
    position: absolute;
    right: 10px;
    top: 5px;
    text-align: center;
    cursor: pointer;
}
.rightmain{
    display: flex;
    width: 100%;
}
.rightmain .left-del{
    width: 68%;
}
.rightmain .left-del table{
    width: 100%;
    text-align: center;
}
.rightmain .left-del table td{
    border:1px solid #ddd;
}
.rightmain .right-del{
    width: 32%;
    padding-left: 20px;
}
.sqqr{
    width: 120px;
    margin: 0 auto;
}
.left-city{
    width: 40%;
    height: 100%;
    overflow-y: auto;
    padding-top: 10px;
    padding-left: 10px;
    border-right: 1px solid #eee;
}
.city-choice{
    height: 400px;
    background: #fff;
    display: flex;
}
.right-city{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.right-city table{
    width: 100%;
    text-align: center;
}
.right-city table td{
    border: 1px solid #eee;
}
    </style>
</head>
<body>
    <div class="index">
        <div class="myhead">
            <div class="top">
    <div class="title1"><div class="tit1">智能雷电系统</div></div>
            <div class="time">
                <div class="data"></div>
                <div class="time1"></div>
        </div>

        <div class="titright">
            <div class="dlzc">
                <div class="touxiang">
                    <img src="/static/img/1208048.png" alt="">
                </div>
                <a href="#" style="padding-right:5px">{{username}}</a>|
                <span id="level_id"> {{ level_id }}</span>|
                <i class="fa fa-power-off" aria-hidden="true"></i>
                <a href="login.html">注销</a>
            </div>
            <div class="search"><input text="text" class="seek"/><div class="csicon"><i class="fa fa-search" aria-hidden="true"></i></div></div>

        </div>
    </div>
        </div>
        <div class="cont">
        <div class="contain">
            <div class="left">
                <div class="tool">
                    <div class="tooll">
                            <ul class="tool11">
                                    <li>
                                        <div id="history">
                                            <div class="tool1">
                                                <i class="fa fa-search" aria-hidden="true"></i>
                                            </div>
                                            <div class="tool2">
                                                <p>历史查询</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div id="tjtt">
                                            <div class="tool1">
                                                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="tool2">
                                                <p>添加探头</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div id="sctt">
                                            <div class="tool1">
                                                <i class="fa fa-minus-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="tool2">
                                                <p>删除探头</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div id="history">
                                            <div class="tool1">
                                                <i class="fa fa-cogs" aria-hidden="true"></i>
                                            </div>
                                            <div class="tool2">
                                                <p>设备管理</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div id="history">
                                            <div class="tool1">
                                                <i class="fa fa-wrench" aria-hidden="true"></i>
                                            </div>
                                            <div class="tool2">
                                                <p>设备维护</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div id="history">
                                            <div class="tool1">
                                                <i class="fa fa-cog" aria-hidden="true"></i>
                                            </div>
                                            <div class="tool2">
                                                <p>设置</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div id="history">
                                            <div class="tool1">
                                                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                                            </div>
                                            <div class="tool2">
                                                <p>帮助</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                    </div>
                    
                    <div class="tbHide">
                        <div class="tbimg">
                            <img src="/static/img/tbHide.png" alt="" class="tbimghide">
                            <img src="/static/img/tbShow.png" alt="" class="tbimgshow">
                        </div>     
                    </div>
                </div>
                <div id="allmap"></div>
            </div>
            <div class="right">
                <div class="rightnav">
                        <!--<div class="panel-group" id="pBox">
                                <div class="panel panel-default">
                                    <div class="panel-heading csactive">
                                        <h4 class="panel-title">
                                            <!--手风琴效果，在panel-group后加上ID属性后，在a标签的属性中加入data-parent="pBox"
                                            <a href="#box1" data-toggle="collapse" data-parent="#pBox">江苏</a>
                                        </h4>
                                    </div>
                                    <div class="collapse panel-collapse" id="box1">
                                        <div class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="panel-group" id="jiangsu">
                                            <div class="panel panel-defaul">
                                                <div class="panel-heading ">
                                                    <h4 class="panel-title">
                                                        <a href="#nanjing"  data-toggle="collapse" data-parent="#jiangsu">南京</a>
                                                    </h4>
                                                </div>
                                                <div class="collapse panel-collapse" id="nanjing">
                                                    <div class="a"><a href="#">江宁区</a></div>
                                                    <div class="a"><a href="#">建邺区</a></div>
                                                </div>
                                            </div>
    
                                            <div class="panel panel-defaul">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a href="#suzhou"  data-toggle="collapse" data-parent="#jiangsu">苏州</a>
                                                    </h4>
                                                </div>
                                                <div class="collapse panel-collapse" id="suzhou">
                                                    <div class="a"><a href="#">姑苏区</a></div>
                                                    <div class="a"><a href="#">相城区</a></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                    
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a href="#box2" data-toggle="collapse" data-parent="#pBox">天津市</a>
                                        </h4>
                                    </div>
                                    <!--.in默认打开
                                    <div class="collapse panel-collapse" id="box2">
                                    <div class="panel-body">
                                        
                                        <div class="a"><a href="#">河西区</a></div>
                                        <div class="a"><a href="#">河北区</a></div>
                                        
                                    </div>
                                </div>
                                </div>
                    
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a href="#box3" data-toggle="collapse" data-parent="#pBox">安徽</a>
                                        </h4>
                                    </div>
                                    <div class="collapse panel-collapse" id="box3">
                                    <div class="panel-body">
                                        <div class="a"><a href="#">天长市</a></div>
                                    </div>
                                </div>
                                </div>
                            </div>-->
                <div class="city-choice">
{#                    <div class="left-city">#}
{#                            <div id="example">#}
{#                                    <div class="demo-section k-content">#}
{#                                        <ul id="treeview">#}
{#                                            <li data-expanded="true">#}
{##}
{#                                                全国#}
{#                                                <ul>#}
{#                                                    <li data-expanded="flase">#}
{#                                                        江苏#}
{#                                                        <ul>#}
{#                                                            <li data-expanded="flase">南京#}
{#                                                                <ul>#}
{#                                                                    <li>江宁区</li>#}
{#                                                                    <li>建邺区</li>#}
{#                                                                </ul>#}
{#                                                            </li>#}
{#                                                            <li>淮安</li>#}
{#                                                            <li>苏州</li>#}
{#                                                        </ul>#}
{#                                                    </li>#}
{#                                                    <li data-expanded="flase">#}
{#                                                        天津#}
{#                                                        <ul>#}
{#                                                            <li>#}
{#                                                                河西区#}
{#                                                            </li>#}
{#                                                            <li>#}
{#                                                                河北区#}
{#                                                            </li>#}
{##}
{#                                                        </ul>#}
{#                                                    </li>#}
{#                                                    <li data-expanded="flase">安徽#}
{#                                                            <ul>#}
{#                                                                <li>天长市</li>#}
{#                                                            </ul>#}
{#                                                    </li>#}
{##}
{#                                                </ul>#}
{#                                            </li>#}
{#                                        </ul>#}
{#                                    </div>#}
{#                    </div>#}
{#                    </div>#}
                    <div class="right-city">
{#                        <div id="treetable"></div>#}
                        <div id="treetable2"></div>

{#                        <table cellspacing="0" cellpadding="0">#}
{#                            <tr>#}
{#                                <td>地区</td>#}
{#                                <td>预警ID</td>#}
{#                                <td>预警名称</td>#}
{#                                <td>设备状态</td>#}
{#                            </tr>#}
{#                            <tr>#}
{#                                <td>11</td>#}
{#                                <td></td>#}
{#                                <td></td>#}
{#                                <td></td>#}
{#                            </tr>#}
{#                        </table>#}
                    </div>
                </div>
                    <div class="weeknews">
                            <div class="nyjgzs">
                                    <div class="title">
                                      <table>
                                        <tr>   <!--这边设备数量需要从后端取得 -->
                                       <!--Jquery 版本问题需要解决   -->
                                    <td style="width:128px">设备编号:<select name="设备编号">
                                                                    <option value="0">全部</option>
                                                                    <option value="1">1</option>
                                                                     <option value="2">2</option>
                                                            </select>
                                    </td>
                                    <td style="width:42%">日期|时间</td>
                                    <td>闪电次数</td>
                                    <td>预警指数</td>
                                    <td>预警种类</td>

                                </tr>
                                      </table>
                                    </div>
                                    <div class="cont">
                                      <table class="nycont">
                                        <!-- abraham: Weekly_warning_info 从后端抓数据 -->
                               {% for row in weekly_warning_info %}
                                <tr>  <!-- 行-->
                                    {% for key, col in row.items %}
                                        <td>{{ col }}</td>  <!-- 列赋值 -->
                                    {% endfor %}
                                </tr>
                               {% endfor %}
                                      </table>
                                    </div>
                                  </div>
                    </div>
            </div>
        </div>
        </div>
        <!--预警系统悬浮按钮-->
        <!--历史查询-->
        <div class="hostory">
            <div class="lscx">
                <div class="navtop">
                    <ul class="nav nav-tabs">
                        <li role="presentation" class="active" id="ldyjxx">
                            <a href="#">雷电预警信息查询</a>
                        </li>
                        <li role="presentation" id="sbzt">
                            <a href="#">当前设备状态查询</a>
                        </li>                       
                    </ul> 
                </div>
                <div class="close" id="lscxclose"><i class="fa fa-times" aria-hidden="true"></i></div>
                <div class="managecont">
                    <!--雷电预警系统-->
                    <div class="ldyj">
                        <div class="leftnav" >
                            <ul id="leftnav">
                                <li id="A1" class="ldyjactive" >
                                    <i class="fa fa-calendar" aria-hidden="true"></i>
                                    <p>日期查询</p>
                                </li>
                                <li id="A2">
                                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                                    <p>预警点查询</p>
                                </li>
                                <li>
                                    <i class="fa fa-bar-chart" aria-hidden="true"></i>
                                    <p>数据比对</p>
                                </li>
                                <li>
                                    <i class="fa fa-line-chart" aria-hidden="true"></i>
                                    <p>轨迹查询</p>
                                </li>
                            </ul>
                        </div>
                        <ul>
                        <!--日期查询-->
                        <li class="rqcx">
                        <div class="contains">
                            <div class="rqcxbg">
                                <table id="data_table">
                                    <tr>
                                        <td style="width:190px;" rowspan="5">
                                            <div class="yjchoice">
                                                <div style="text-align: right;padding-right:3px;width: 50px">年份：</div>
                                                <div>
                                                    <input type="text" data-options="width:120,onChange:qrChangeYear,min:2014,max:2099" value="2019" style="width: 85px; height: 28px; line-height: 24px;" id="yearselect">
                                                </div> 
                                                <div class="numbh">
                                                    <i class="fa fa-chevron-up" aria-hidden="true"  id="yearadd"></i>
                                                    <i class="fa fa-chevron-down" aria-hidden="true"  id="yearminus"></i>
                                                </div>
                                            </div>
                                        </td>
                                        <td>月份</td>
                                        <td>1月</td>
                                        <td>2月</td>
                                        <td>3月</td>
                                        <td>4月</td>
                                        <td>5月</td>
                                        <td>6月</td>
                                        <td>7月</td>
                                        <td>8月</td>
                                        <td>9月</td>
                                        <td>10月</td>
                                        <td>11月</td>
                                        <td>12月</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="rqcxxq">
                                <!--echart表-->
                                <div class="xqright" id="xqright"></div>
                                <!--详情表单-->
                                <div class="xqbd">
                                    <!--标题-->
                                    <div class="xqtitle">
                                        <div style="float: left">雷电预警信息详情表</div>
                                        <div class="xiazai"><a href="" class="double">生成excel表格</a></div>
                                    </div>
                                    <!--表格-->
                                    <div class="xqbg">
                                        <table  style="font-size: 8px;width:100%;" cellspacing="0" cellpadding="0" id="totaly_warning_info_table">
                                            <tr>
                                                <td>预警点名称</td>
                                                <td>预警点ID</td>
                                                 <td>闪电次数</td>
                                                <td>报警状态</td>
                                                <td>报警种类</td><!--monthly_warning_info[{} ] -->
                                                <td>1⚡️日期|时间</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </li>
                        
                        <!--预警点查询-->
                        <li class="yjdcx">
                        <div class="contains">
                            <div class="rqcxbg">
                                <table id="data_table_2">
                                    <tr>
                                        <td style="width:190px;" rowspan="5">
                                            <div class="yjchoice">
                                                <div  style="text-align: right;padding-right:3px;width: 50px">地区：</div>
                                                <div>
                                                    <input type="text" value="全部"  style="width: 85px; height: 20px; line-height: 20px;" id="dqxz">
                                                </div>
                                                <div class="numbh">
                                                    <i class="fa fa-chevron-down" aria-hidden="true" id="dqyj" style="padding-top: 2px;"></i>
                                                </div>
                                                <div class="adresstree">
                                                    <ul id="treeDemo" class="ztree"></ul>
                                                </div>
                                            </div>
                                            <div  class="yjchoice">
                                                <div  style="text-align: right;padding-right:3px;width: 50px">预警点</div>
                                                <div>
                                                    <select name="" id="" style="width: 88px;">
                                                        {% for row in yj_equipment_info %}
                                                            {% for key, col in row.items %}
                                                            {% if key == "预警ID" %}
                                                                <option value="">{{ col }}</option>
                                                            {% endif %}
                                                            {% endfor %}
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>
                                            <div  class="yjchoice">
                                                <div style="text-align: right;padding-right:3px;width: 50px">年份：</div>
                                                <div>
                                                    <input type="text" data-options="width:120,onChange:qrChangeYear,min:2014,max:2099" value="2019" style="width: 85px; height: 28px; line-height: 24px;" id="yearselect1">
                                                </div> 
                                                <div class="numbh">
                                                    <i class="fa fa-chevron-up" aria-hidden="true" id="yearadd1"></i>
                                                    <i class="fa fa-chevron-down" aria-hidden="true" id="yearminus1"></i>
                                                </div>
                                            </div>
                                        </td>
                                        
                                        <td>月份</td>
                                        <td>1月</td>
                                        <td>2月</td>
                                        <td>3月</td>
                                        <td>4月</td>
                                        <td>5月</td>
                                        <td>6月</td>
                                        <td>7月</td>
                                        <td>8月</td>
                                        <td>9月</td>
                                        <td>10月</td>
                                        <td>11月</td>
                                        <td>12月</td>
                                    </tr>

                                </table>
                            </div>
                            <div class="rqcxxq">
                                <!--echart表-->
                                <div class="xqright" id="yjxqright"></div>
                                <!--详情表单-->
                                <div class="xqbd">
                                    <!--标题-->
                                    <div class="xqtitle">
                                        <div style="float: left">雷电预警信息详情表</div>
                                        <div class="xiazai"><a href="" class="double">生成excel表格</a></div>
                                    </div>
                                    <!--表格-->
                                    <div class="xqbg">
                                        <table cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td>预警点名称</td>
                                                <td>预警点ID</td>
                                                <td>预警等级</td>
                                                <td>预警发生时间--预警结束时间</td>
                                            </tr>
                                            <tr>
                                                <td>观测点08</td>
                                                <td>2131</td>
                                                <td>41</td>
                                                <td>145</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </li>
                        </ul>
                    </div>
                    <div class="sbztcx">
                        <div class="left">
                            <p class="title">雷电预警状态信息列表</p>
                            <div class="tab">
                                <div class="tab1">
                                    <table class="weihu" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>序号</td>
                                            <td>预警名称</td>
                                            <td>预警点ID</td>
                                            <td>安装日期</td>
                                            <td>设备经度</td>
                                            <td>设备纬度</td>
                                            <td>运行状态</td>
                                            <td>维护人员</td>
                                        </tr>
                                       {% for row in yj_equipment_info %}
                                            <tr>  <!-- 行-->
                                            {% for key, col in row.items %}
                                            <td>{{ col }}</td>  <!-- 列赋值 -->
                                            {% endfor %}
                                            </tr>
                                        {% endfor %}
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <p class="title">预警点维护日志列表</p>
                            <div class="tab">
                                <div class="tab1">
                                    <table class="weihu" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>序号</td>
                                            <td>预警点名称</td>
                                            <td>预警点ID</td>
                                            <td>维护操作</td>
                                            <td>维护时间</td>
                                            <td>维护人</td>
                                            <td>部门</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="addtj">
            <div class="tjmain">
                <div class="close" id="tjtt-close">
                    <i class="fa fa-times" aria-hidden="true"></i>
                </div>
                <div class="left">
                    <img src="/static/img/1208048.png" alt="">
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <h3>添加探头</h3>
                        </li>
                        <li>
                            
                                <div class="tjname">管理员账号：</div>
                                    <input type="text" class="adminnum manageinput" >
                                    <div class="tjname">管理员密码：</div>
                                    <input type="text" name="" id="" class="adminpwd manageinput">
                                    <button type="button" class="btn btn-primary">授权确认</button>
                            
                        </li>
                        <li>
                            <div class="tjname">预警点名称：</div>
                            <input type="text" class="manageinput">
                            
                        </li>
                        <li>
                            <div class="tjname">预警点ID：</div>
                            <input type="text" class="manageinput">
                            
                        </li>
                        <li>
                            <div class="tjname">经度：</div>
                                <input type="text" class="manageinput" style="margin-right:10px">
                            <div class="tjname">纬度：</div><input type="text" class="manageinput">
                            
                        </li>
                        <li>
                            <div style="display:flex;">
                                <div class="tjname">安装时间：</div>
                                <div id="example">
                                    <div class="demo-section k-content">
                        
                                        <input id="datepicker" value="10/10/2011" title="datepicker"  /> 
                                    </div>
                                
                            </div>
                        </li>
                        <li>
                            <div class="tjname">安装地点：</div>
                                <div class="demo-section k-content">
                                    <input id="dropdowntree" />
                                </div>
                            
                        </li>
                        <li>
                            <div style="width:100%">
                                <div style="width:100px;margin:0 auto;">
                                    <button class="btn btn-primary">确认添加</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="deletetj">
            <div class="tjmain">
                <div class="close" id="sctt-close">
                    <i class="fa fa-times" aria-hidden="true"></i>
                </div>
                <div class="left">
                    <img src="/static/img/1208048.png" alt="">
                </div>
                <div class="right" style="width:100%">
                    <ul>
                        <li>
                            <h3>删除探头</h3>
                        </li>
                        <li>
                            <div class="delete-name">
                                <div>预警点名称：</div>
                                <input type="text" class="sc-search">
                                <div class="dele-search"><i class="fa fa-search" aria-hidden="true"></i></div>
                            </div>
                        </li>
                        <li>
                            <div class="rightmain">
                                <div class="left-del">
                                    <table  cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>序号</td>
                                            <td>预警点名称</td>
                                            <td>预警点id</td>
                                            <td>设备经度</td>
                                            <td>设备纬度</td>
                                            <td>安装日期</td>
                                            <td>维护人员</td>
                                        </tr>
                                        <tr>
                                            <td>11</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="right-del">
                                    <div style="margin-bottom:10px;">管理员账号：<input type="text" class="manageinput"></div>
                                    <div style="margin-bottom:10px;">管理员密码：<input type="text" class="manageinput"></div>
                                    <div><div class="sqqr"><button class="btn btn-primary">授权确认</button></div></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div style="width:100%;padding-top:30px;">
                                <div class="sqqr"><button class="btn btn-primary">删除</button></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/static/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/js/echart/echarts3.js"></script>
<script src="/static/js/echart/ldyjmonth.js"></script>
<script src="/static/js/baidu.js"></script>

<script src="/static/js/ztree/jquery.ztree.all.min.js"></script>
<script src="/static/js/control/control.js"></script>
<script>
    function nowtime(){
        var myDate = new Date();
        myDate.getYear();        //获取当前年份(2位)
        var year = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
        var month=myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
        var data=myDate.getDate();        //获取当前日(1-31)
        myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
        myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
        myDate.getHours();       //获取当前小时数(0-23)
        myDate.getMinutes();     //获取当前分钟数(0-59)
        myDate.getSeconds();     //获取当前秒数(0-59)
        myDate.getMilliseconds();    //获取当前毫秒数(0-999)
        myDate.toLocaleDateString();     //获取当前日期
        var mytime=myDate.toLocaleTimeString();     //获取当前时间
        myDate.toLocaleString( );        //获取日期与时间
        var datatime=year+"-"+month+"-"+data;
        $(".data").html(datatime);
        $(".time1").html(mytime)
    }
    nowtime();
    window.onload=function(){
                //每1秒刷新时间
        setInterval("nowtime()",1000);
    }

//鼠标移入移出管理菜单事件
$(".tool").on("mouseover",function(){
    $(".tooll").css("display","block")
    $(".tbimgshow").css("display","block")
    $(".tbimghide").css("display","none")
})
$(".tool").on("mouseout",function(){
    $(".tooll").css("display","none")
    $(".tbimgshow").css("display","none")
    $(".tbimghide").css("display","block")
})


   

    //管理1打开
    $("#history").on("click",function(){
        $(".hostory").css("display","block")
    });
    //管理1关闭
    $("#lscxclose").on("click",function(){
        $(".hostory").css("display","none")
    });
    var data_1 = JSON;
    $(".tool1").click(function () {

        var date = new Date();
        var year = date.getFullYear();
        console.log(year, $("#level_id").text());
        $.ajax({
            url: '/query_history_year/',
            type: 'post',
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                level_id: $("#level_id").text(),
                year: year
            },
            success: function (e) {
                if($('#data_table').find("tr").length =='5'){
                    console.log("ok");
                    tb_1 = $('#data_table').find("tr");
                    tb_2 = $('#totaly_warning_info_table').find("tr");
                    var Len = $('#totaly_warning_info_table').find("tr").length;
                    for (var i=4;i>=1;i--){
                        tb_1[i].remove();
                    }
                    if ( Len > 1){
                        for (var i=Len-1;i>=1;i--){
                        tb_2[i].remove();
                        }

                    }
                }
                var trs=[];
			    var trDom;
                data_1 = JSON.parse(e);
                console.log(data_1);
                console.log(data_1.length);
                //data_table
                for(var i=0;i<4;i++){
                    trDom = $('<tr></tr>');
                    for(var key in data_1[i]){
                        console.log(data_1[i][key]);
                        $('<td>'+data_1[i][key]+'</td>').appendTo(trDom);
                        trs.push(trDom);
                    }
                    $(trs[0]).appendTo($('#data_table'));
                    trDom = [];
                    trs = [];
                }
                //
                trDom = [];
                trs = [];
                // data_1[4] 是全部预警信息列表
                for(var i=4;i<data_1.length;i++){
                    console.log("data_1:", data_1[i]);
                    trDom = $('<tr></tr>');
                    for(var n =0; n< data_1[i].length; n++){
                        console.log(data_1[i][n]);
                        trDom = $('<tr></tr>');
                        for(var key in data_1[i][n]){
                            console.log(data_1[i][n][key]);
                            $('<td>'+data_1[i][n][key]+'</td>').appendTo(trDom);
                                trs.push(trDom);
                            }
                        $(trs[0]).appendTo($('#totaly_warning_info_table'));
                        trDom = [];
                        trs = [];
                    }
                }
            }
        })
    });



//添加探头的安装时间日历
    $(document).ready(function() {
        // create DatePicker from input HTML element
        $("#datepicker").kendoDatePicker();

        $("#monthpicker").kendoDatePicker({
            // defines the start view
            start: "year",

            // defines when the calendar should return date
            depth: "year",

            // display month and year in the input
            format: "MMMM yyyy",

            // specifies that DateInput is used for masking the input element
            dateInput: true
        });
    });
//添加探头的安装地址
    $(document).ready(function () {
        // create kendoDropDownTree from input HTML element
        $("#dropdowntree").kendoDropDownTree({
            placeholder: "选择地址",
            height: "auto",
            dataSource: [
                {
                    text:"全国"
                },
                {
                    text: "江苏", items: [//默认展开 expanded: true,
                        { text: "南京" ,items:[{text:"江宁区"},{text:"秦淮区"}]},
                        { text: "淮安" ,items:[{text:"淮安区"},{text:"淮阴区"}]},
                        { text: "苏州" ,items:[{text:"虎丘区"}]}
                    ]
                },
                {
                    text: "天津", items: [
                        { text: "天津" },
                        
                    ]
                }
            ]
        });
    });
    //添加探头关闭按钮
    $("#tjtt-close").on("click",function(){
        $(".addtj").css("display","none");
    });
    //添加探头显示
    $("#tjtt").on("click",function(){
        $(".addtj").css("display","block");
    });
    //删除探头关闭按钮
    $("#sctt-close").on("click",function(){
        $(".deletetj").css("display","none");
    });
    //添加探头显示
    $("#sctt").on("click",function(){
        $(".deletetj").css("display","block");
    });

    $("#yearminus").click(function () {
        $.ajax({
            url: '/query_history_year/',
            type: 'POST',
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                level_id: $("#level_id").text(),
                year: $("#yearselect").val()
            },
            success: function (e) {
                if($('#data_table').find("tr").length =='5'){
                    console.log("ok");
                    tb_1 = $('#data_table').find("tr");
                    tb_2 = $('#totaly_warning_info_table').find("tr");
                    var Len = $('#totaly_warning_info_table').find("tr").length;
                    for (var i=4;i>=1;i--){
                        tb_1[i].remove();
                    }
                    if ( Len > 1){
                        for (var i=Len-1;i>=1;i--){
                        tb_2[i].remove();
                        }

                    }
                }

                var trs=[];
			    var trDom;
                data_1 = JSON.parse(e);
                console.log(data_1);
                console.log(data_1.length);
                //data_table
                for(var i=0;i<4;i++){
                    trDom = $('<tr></tr>');
                    for(var key in data_1[i]){
                        console.log(data_1[i][key]);
                        $('<td>'+data_1[i][key]+'</td>').appendTo(trDom);
                        trs.push(trDom);
                    }
                    $(trs[0]).appendTo($('#data_table'));
                    trDom = [];
                    trs = [];
                }
                //
                trDom = [];
                trs = [];
                // data_1[4] 是全部预警信息列表
                for(var i=4;i<data_1.length;i++){
                    console.log("data_1:", data_1[i]);
                    trDom = $('<tr></tr>');
                    for(var n =0; n< data_1[i].length; n++){
                        console.log(data_1[i][n]);
                        trDom = $('<tr></tr>');
                        for(var key in data_1[i][n]){
                            console.log(data_1[i][n][key]);
                            $('<td>'+data_1[i][n][key]+'</td>').appendTo(trDom);
                                trs.push(trDom);
                            }
                        $(trs[0]).appendTo($('#totaly_warning_info_table'));
                        trDom = [];
                        trs = [];
                    }
                }
            }
        })
    });


    $("#yearadd").click(function () {
        $.ajax({
            url: '/query_history_year/',
            type: 'POST',
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                level_id: $("#level_id").text(),
                year: $("#yearselect").val()
            },
            success: function (e) {
                if($('#data_table').find("tr").length =='5'){
                    console.log("ok");
                    tb_1 = $('#data_table').find("tr");
                    tb_2 = $('#totaly_warning_info_table').find("tr");
                    var Len = $('#totaly_warning_info_table').find("tr").length;
                    for (var i=4;i>=1;i--){
                        tb_1[i].remove();
                    }
                    if ( Len > 1){
                        for (var i=Len-1;i>=1;i--){
                        tb_2[i].remove();
                        }

                    }
                }

                var trs=[];
			    var trDom;
                data_1 = JSON.parse(e);
                console.log(data_1);
                console.log(data_1.length);
                //data_table
                for(var i=0;i<4;i++){
                    trDom = $('<tr></tr>');
                    for(var key in data_1[i]){
                        console.log(data_1[i][key]);
                        $('<td>'+data_1[i][key]+'</td>').appendTo(trDom);
                        trs.push(trDom);
                    }
                    $(trs[0]).appendTo($('#data_table'));
                    trDom = [];
                    trs = [];
                }
                //
                trDom = [];
                trs = [];
                // data_1[4] 是全部预警信息列表
                for(var i=4;i<data_1.length;i++){
                    console.log("data_1:", data_1[i]);
                    trDom = $('<tr></tr>');
                    for(var n =0; n< data_1[i].length; n++){
                        console.log(data_1[i][n]);
                        trDom = $('<tr></tr>');
                        for(var key in data_1[i][n]){
                            console.log(data_1[i][n][key]);
                            $('<td>'+data_1[i][n][key]+'</td>').appendTo(trDom);
                                trs.push(trDom);
                            }
                        $(trs[0]).appendTo($('#totaly_warning_info_table'));
                        trDom = [];
                        trs = [];
                    }
                }
            }
        })
    });

    $(document).ready(function(){
       $("#data_table").click(function(){
          var tdSeq = $(this).parent().find("td").index($(this)[0]);
          console.log();
          var trSeq = $(this).parent().parent().find("tr").index($(this).parent()[0]);
         // alert("第" + (trSeq + 1) + "行，第" + (tdSeq + 1) + "列");
        });
});

    $("#leftnav").on("click","li",function(){
        $(this).addClass("ldyjactive").siblings().removeClass("ldyjactive");
       // var a=$(this)[0].innerText.trim()
        var a=$(this)[0].innerText.trim()
        //console.log(a);
        if(a=="日期查询"){
            $(".rqcx").css("display","block").siblings().css("display","none")
            //sconsole.log(1)

        }else if(a=="预警点查询"){
            console.log((123))
            $(".yjdcx").css("display","block").siblings().css("display","none");



        }
    });

    $("#A2").click(function () {
        if($('#data_table_2').find("tr").length =='5'){
                    console.log("ok");
                    tb_1 = $('#data_table_2').find("tr");
                    tb_2 = $('#totaly_warning_info_table_2').find("tr");
                    var Len = $('#totaly_warning_info_table_2').find("tr").length;
                    for (var i=4;i>=1;i--){
                        tb_1[i].remove();
                    }
                    if ( Len > 1){
                        for (var i=Len-1;i>=1;i--){
                        tb_2[i].remove();
                        }

                    }
                }
        var trs=[];
        var trDom;
        for(var i=0;i<4;i++){
            trDom = $('<tr></tr>');
            for(var key in data_1[i]){
                console.log(data_1[i][key]);
                $('<td>'+data_1[i][key]+'</td>').appendTo(trDom);
                trs.push(trDom);
                }
                $(trs[0]).appendTo($('#data_table_2'));
                trDom = [];
                trs = [];
        }
                //
        trDom = [];
        trs = [];
        // data_1[4] 是全部预警信息列表
        for(var i=4;i<data_1.length;i++){
            console.log("data_1:", data_1[i]);
            trDom = $('<tr></tr>');
            for(var n =0; n< data_1[i].length; n++){
                console.log(data_1[i][n]);
                trDom = $('<tr></tr>');
                for(var key in data_1[i][n]){
                    console.log(data_1[i][n][key])
                    $('<td>'+data_1[i][n][key]+'</td>').appendTo(trDom);
                    trs.push(trDom);
                }
                $(trs[0]).appendTo($('#totaly_warning_info_table_2'));
                trDom = [];
                trs = [];
            }
        }
    }
         )

    <!--abraham added-->
    var YJ_equipment_list = {{ yj_equipment_list|safe }};
    var yj_equipment_info = {{ yj_equipment_info|safe}};
    console.log(yj_equipment_info[0]);

    <!--从后端返回数据-->
        console.log(YJ_equipment_list);
    var dataSource = new kendo.data.TreeListDataSource({
      data: YJ_equipment_list
    });
    $("#treetable2").kendoTreeList({
      dataSource: dataSource,
      height: 400,
      columns: [
        { field: "地区", expandable: true, width: 110,},
        { field: "预警ID" },
        { field: "预警名称" },
        { field: "设备状态"}
      ],
      dataBound: function() {
        var view = this.dataSource.view();
        this.items().each(function(index, row) {
          kendo.bind(row, view[index]);
        });
      }
    });

</script>
<script>
        $(document).ready(function() {
            $("#treeview").kendoTreeView();
        });
    </script>
</html>